<template>
    <div class="city-list" >
        <!-- <router-link to="/"> -->
            <div class="c-item" v-for="city in cityList" :key="city.id" @click="citydata(city)">{{city.nm || city}}</div>
        <!-- <router-link> -->
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    props:{
        cityList:{Object,Array}
    },
    data(){
        return{
            
        }
    },
      
    methods:{
        citydata(data){
            this.city(data)
            this.$router.push({path:"/"})
        },
        ...mapMutations(["city"])
    },

}
</script>

<style lang="less" scoped>
.city-list{
    padding: 0px 30px 15px 0px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    .c-item{
        float: left;
        background: #fff;
        width: 29%;
        height: 33px;
        margin-top: 15px;
        margin-left: 4%;
        padding: 0 4px;
        border: 1px solid #e6e6e6;
        border-radius: 3px;
        line-height: 33px;
        text-align: center;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>